﻿@using ZhongKeSite.Entity;
@{
    string path = this.Context.Request.Path.Value.ToLower();
}
@model AboutInfo
<div class="banner banner-about wow fadeInUp">
    <div class="container">
        <h1 class="title-page">推动人类生产技术颠覆性创新</h1>
    </div>
</div>
<div class="page page-about">
    <section class="container">
        <div class="row">
            <div class="col-md-auto">
                <aside class="leftcol" id="leftcol">
                    <nav class="leftnav">
                        <ul class="navs">
                            @foreach (Menu item in ViewBag.MenuMiddleLeft)
                            {
                                <li>
                                    <a href="@item.Link" class="@(item.Link==path?"active":"")">@item.Title</a>
                                    @if (item.Link == "/about")
                                    {
                                        @Html.Raw(item.Remark)
                                    }
                                </li>
                             }
                        </ul>
                    </nav>
                </aside>
            </div>
            <div class="col-md">
                <main class="content">
                    @if(Model.Story != null)
                    {
                        @Html.Raw(Model.Story.Content)
                    }
                    <div class="history" id="history">
                        <div class="title-section">
                            <h2>里程碑</h2>
                        </div>
                        <ul class="tab-header" id="tab-header">
                            <li class="active" data-id="#tab-content01">品牌</li>
                            <li data-id="#tab-content02">产品</li>
                        </ul>
                        <div class="tab-content active" id="tab-content01">
                            <div class="box">
                                <ul class="list">
                                    @foreach (MileStone item in Model.MileStoneList.Where(k => k.MileStoneType == MileStoneType.Brand.ToString()).OrderByDescending(o => o.PublishDate).ToList())
                                    {
                                        <li>
                                            <time>@item.PublishDate.Value.ToString("yyyy.MM")</time>
                                            <p>@item.Title</p>
                                        </li>
                                    }
                                </ul>
                            </div>
                        </div>
                        <div class="tab-content" id="tab-content02">
                            <div class="box">
                                <ul class="list">
                                    @foreach (MileStone item in Model.MileStoneList.Where(k => k.MileStoneType == MileStoneType.Product.ToString()).OrderByDescending(o => o.PublishDate).ToList())
                                    {
                                        <li>
                                            <time>@item.PublishDate.Value.ToString("yyyy.MM")</time>
                                            <p>@item.Title</p>
                                        </li>
                                    }
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="awards" id="awards">
                        <div class="title-section">
                            <h2>奖项</h2>
                        </div>
                        <div class="awards-list">
                            <div class="awards-container swiper-container">
                                <div class="swiper-wrapper">
                                    @foreach(Honor item in Model.HonorList.Where(k => k.HonorType == HonorType.Awards.ToString()).OrderBy(o => o.SortNo).ToList())
                                    {
                                        <div class="swiper-slide"><img src="@item.CoverImage" alt=""></div>
                                    }
                                </div>
                                <div class="nav row justify-content-center align-items-center">
                                    <div class="col-auto">
                                        <div class="swiper-button-prev"><i class="iconfont iconleft"></i></div>
                                    </div>
                                    <div class="col-auto">
                                        <div class="swiper-pagination"></div>
                                    </div>
                                    <div class="col-auto">
                                        <div class="swiper-button-next"><i class="iconfont iconright"></i></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="patents" id="patents">
                        <div class="title-section">
                            <h2>专利</h2>
                            <p>我们已拥有386项全球专利</p>
                        </div>
                        <div class="patents-list">
                            <div class="patents-container swiper-container">
                                <div class="swiper-wrapper">
                                    @foreach (Honor item in Model.HonorList.Where(k => k.HonorType == HonorType.Patent.ToString()).OrderBy(o => o.SortNo).ToList())
                                    {
                                        <div class="swiper-slide"><img src="@item.CoverImage" alt=""></div>
                                    }
                                </div>
                                <div class="nav row justify-content-center align-items-center">
                                    <div class="col-auto">
                                        <div class="swiper-button-prev"><i class="iconfont iconleft"></i></div>
                                    </div>
                                    <div class="col-auto">
                                        <div class="swiper-pagination"></div>
                                    </div>
                                    <div class="col-auto">
                                        <div class="swiper-button-next"><i class="iconfont iconright"></i></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="cooperate" id="cooperate">
                        <div class="title-section">
                            <h2>合作</h2>
                            <p>我们已经并正和以下品牌展开合作</p>
                        </div>
                        <div class="cooperate-list">
                            <div class="cooperate-container swiper-container">
                                <div class="swiper-wrapper">
                                    @foreach (Partner item in Model.PartnerList)
                                    {
                                        <div class="swiper-slide"><img src="@item.CoverImage" alt=""></div>
                                    }
                                </div>
                                <div class="nav row justify-content-center align-items-center">
                                    <div class="col-auto">
                                        <div class="swiper-button-prev"><i class="iconfont iconleft"></i></div>
                                    </div>
                                    <div class="col-auto">
                                        <div class="swiper-pagination"></div>
                                    </div>
                                    <div class="col-auto">
                                        <div class="swiper-button-next"><i class="iconfont iconright"></i></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </main>
            </div>
        </div>
    </section>
</div>

@section scripts {
    <script src="~/portal/js/vendor/swiper/js/swiper.min.js"></script>
    <script>
        var swiper = new Swiper('.awards-container', {
            slidesPerView: 'auto',
            spaceBetween: 30,
            pagination: {
                el: '.swiper-pagination',
                clickable: true,
            },
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            }

        });
        var swiper = new Swiper('.patents-container', {
            slidesPerView: 'auto',
            spaceBetween: 30,
            pagination: {
                el: '.swiper-pagination',
                clickable: true,
            },
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            }

        });

        var swiper = new Swiper('.cooperate-container', {
            slidesPerView: 5,
            slidesPerColumn: 3,
            spaceBetween: 30,
            pagination: {
                el: '.swiper-pagination',
                clickable: true,
            },
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
            breakpoints: {
                640: {
                    slidesPerView: 1,
                    spaceBetween: 20,
                },
                768: {
                    slidesPerView: 3,
                    spaceBetween: 40,
                },
                1024: {
                    slidesPerView: 4,
                    spaceBetween: 50,
                }
            }
        });

        $(function () {
            $("#tab-header li").click(function (e) {
                var id = $(this).attr("data-id");
                $("#tab-header li").removeClass('active');
                $(this).addClass('active');

                $('.tab-content.active').removeClass('active');
                $(id).addClass('active');
            })

            var offset = $("#leftcol").offset();
            $(window).scroll(function () {

                if (offset.top < $(window).scrollTop()) {
                    $("#leftcol").addClass("fixedLeft");
                } else {
                    $("#leftcol").removeClass("fixedLeft");
                }
            })

        });
    </script>
}